<template>
    <div class="search">
        <Card>
            <Row type="flex" justify="space-between" class="code-row-bg">
                <Col v-if="expand" span="5">
                    <Row class="operation">
                        <Button @click="addDcit" type="primary" icon="md-add">添加字典</Button>
                        <Dropdown @on-click="handleDropdown">
                            <Button>更多操作
                                <Icon type="md-arrow-dropdown"/>
                            </Button>
                            <DropdownMenu slot="list">
                                <DropdownItem name="editDcit">编辑字典</DropdownItem>
                                <DropdownItem name="delDcit">删除字典</DropdownItem>
                                <DropdownItem name="refreshDcit">刷新</DropdownItem>
                            </DropdownMenu>
                        </Dropdown>
                    </Row>
                    <Alert show-icon>
                        当前选择：
                        <span class="select-title">{{editTitle}}</span>
                        <a class="select-clear" v-if="editTitle" @click="cancelEdit">取消选择</a>
                    </Alert>
                    <Input
                            v-model="searchKey"
                            suffix="ios-search"
                            @on-change="search"
                            placeholder="输入搜索字典"
                            clearable
                    />
                    <div class="tree-bar" :style="{maxHeight: maxHeight}">
                        <Tree ref="tree" :data="treeData" @on-select-change="selectTree"></Tree>
                    </div>
                    <Spin size="large" fix v-if="treeLoading"></Spin>
                </Col>
                <div class="expand">
                    <Icon :type="expandIcon" size="16" class="icon" @click="changeExpand"/>
                </div>
                <Col :span="span">
                    <Row>
                        <Form ref="searchForm" :model="searchForm" inline :label-width="60" class="search-form">
                            <Form-item label="数据名称" prop="title">
                                <Input
                                        type="text"
                                        v-model="searchForm.title"
                                        placeholder="请输入"
                                        clearable
                                        style="width: 200px"
                                />
                            </Form-item>
                            <Form-item label="状态" prop="status">
                                <Select
                                        v-model="searchForm.status"
                                        placeholder="请选择"
                                        clearable
                                        style="width: 200px"
                                >
                                    <Option value="0">正常</Option>
                                    <Option value="-1">禁用</Option>
                                </Select>
                            </Form-item>
                            <!--<Form-item style="margin-left:-35px;" class="br">-->
                                <!--<Button @click="handleSearch" type="primary" icon="ios-search">搜索</Button>-->
                                <!--<Button @click="handleReset">重置</Button>-->
                            <!--</Form-item>-->
                        </Form>
                    </Row>
                </Col>
            </Row>
        </Card>
    </div>
</template>

<script>
  import axios from 'axios'
  import mock from '@/mock/index.js'
  import {
    getAllDictList,
    addDict,
    editDict,
    deleteDict,
    searchDict,
    getAllDictDataList,
    addDictData,
    editDictData,
    deleteData
  } from "@/api/index";

  export default {
    name: 'Dict',
    data() {
      return {
        editTitle: "first edit title",
        maxHeight: "500px",
        expandIcon: "ios-arrow-back",
        span: 18,
        loading: false,
        searchKey: "", // 搜索树
        selectNode: {},
        dictForm: {
          description: "",
          sortOrder: 0
        },
        searchForm: {
          // 搜索框对应data对象
          name: "",
          status: "",
          pageNumber: 1, // 当前页数
          pageSize: 10, // 页面大小
          sort: "sortOrder", // 默认排序字段
          order: "asc" // 默认排序方式
        },
        data: [], //表单数据
        total: 0 ,// 表单数据总数
        treeData: [],
        expand: true
      }
    },
    methods: {
      init() {
        // 获取树数据
        this.getAllDict();
        // 获取表单数据
        // this.getDataList();
      },
      getAllDict() {
        this.treeLoading = true;
        getAllDictList().then(res => {

          this.treeLoading = false;
          if (res.success === true) {
            this.treeData = res.result;
            console.log("treeData ->", JSON.stringify(res.result))
          }
        });
      },
      testAxios() {
        axios.get('http://localhost:8080')
          .then(function (res) {
            alert(res.data);
          }).catch(function (res) {
          alert(res)
        })
      },
      getUser() {
        axios.get('http://localhost:8080/user')
          .then(function (res) {
            alert(JSON.stringify(res.data));
          }).catch(function (res) {
          alert(res)
        })
      },
      getMenu() {
        axios.get('http://localhost:8080/menu')
          .then(function (res) {
            alert(JSON.stringify(res.data));
          }).catch(function (res) {
          alert(res)
        })
      },
      changeExpand() {
        this.expand = !this.expand;
        if (this.expand) {
          this.expandIcon = "ios-arrow-back";
          this.span = 18;
        } else {
          this.expandIcon = "ios-arrow-forward";
          this.span = 23;
        }
      },
      selectTree(v) {
        if (v.length > 0) {
          // 转换null为""
          for (let attr in v[0]) {
            if (v[0][attr] === null) {
              v[0][attr] = "";
            }
          }
          let str = JSON.stringify(v[0]);
          let data = JSON.parse(str);
          this.selectNode = data;
          this.dictForm = data;
          this.editTitle = data.title + "(" + data.type + ")";
          // 重新加载表
          //this.searchForm.pageNumber = 1;
          //this.searchForm.pageSize = 10;
          this.getDataList();
        } else {
          this.cancelEdit();
        }
      },
      search() {
        // 搜索树
        if (this.searchKey) {
          this.treeLoading = true;
          searchDict({key: this.searchKey}).then(res => {
            this.treeLoading = false;
            if (res.success === true) {
              this.treeData = res.result;
            }
          });
        } else {
          // 为空重新加载
          this.getAllDict();
        }
      },
      addDcit() {
        //this.modalType = 0;
        //this.dictModalTitle = "添加字典";
       // this.$refs.dictForm.resetFields();
        //this.dictModalVisible = true;
      },
      handleDropdown(name) {

      },
      cancelEdit() {
        let data = this.$refs.tree.getSelectedNodes()[0];
        if (data) {
          data.selected = false;
        }
        // 取消选择后获取全部数据
        this.selectNode = {};
        this.editTitle = "";
        this.getDataList();
      },
      treeLoading() {

      },
      getDataList() {
        this.loading = true;
        if (this.selectNode.id) {
          this.searchForm.dictId = this.selectNode.id;
        } else {
          delete this.searchForm.dictId;
        }
        if (!this.searchForm.status) {
          this.searchForm.status = "";
        }
        getAllDictDataList(this.searchForm).then(res => {
          this.loading = false;
          if (res.success === true) {
            this.data = res.result.content;
            this.total = res.result.totalElements;
          }
        });
      },

    },
    mounted() {
      this.init();
    }
  }
</script>
<style lang="scss">
    .tree-bar {
        max-height: 500px;
        overflow: auto;
        margin-top: 5px;
    }

    .expand {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;

        .icon {
            cursor: pointer;
        }

        :hover {
            color: #1890ff !important;
        }
    }

    .search {
        .operation {
            margin-bottom: 2vh;
        }

        .select-count {
            font-size: 13px;
            font-weight: 600;
            color: #40a9ff;
        }

        .select-title {
            font-size: 12px;
            font-weight: 600;
            color: #40a9ff;
        }

        .select-clear {
            margin-left: 10px;
        }

        .page {
            margin-top: 2vh;
        }

        .drop-down {
            font-size: 13px;
            margin-left: 5px;
        }
    }
</style>
